<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Widget</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div class="tabs-container">
        <ul class="tabs">
            <li>
                <a id="tab1" title="Analytics" href="#tab1">
                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M3 3v18h18"></path>
                        <path d="M20 18v3"></path>
                        <path d="M16 16v5"></path>
                        <path d="M12 13v8"></path>
                        <path d="M8 16v5"></path>
                        <path d="M3 11c6 0 5 -5 9 -5s3 5 9 5"></path>
                    </svg>
                    Analytics
                </a>
            </li>
            <li>
                <a id="tab2" title="Reports" href="#tab2">
                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M7 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>
                        <path d="M7 3v4h4"></path>
                        <path d="M9 17l0 4"></path>
                        <path d="M17 14l0 7"></path>
                        <path d="M13 13l0 8"></path>
                        <path d="M21 12l0 9"></path>
                    </svg>
                    Reports
                </a>
            </li>

            <li>
                <a id="tab3" title="Performance" href="#tab3">
                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M3 12m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
                        <path d="M9 8m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
                        <path d="M15 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
                        <path d="M4 20l14 0"></path>
                    </svg>
                    Performance
                </a>
            </li>
            <li>
                <a id="tab4" title="Funds" href="#tab4">
                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M3 21l18 0"></path>
                        <path d="M3 10l18 0"></path>
                        <path d="M5 6l7 -3l7 3"></path>
                        <path d="M4 10l0 11"></path>
                        <path d="M20 10l0 11"></path>
                        <path d="M8 14l0 3"></path>
                        <path d="M12 14l0 3"></path>
                        <path d="M16 14l0 3"></path>
                    </svg>
                    Funds
                </a>
            </li>
        </ul>
        <div class="tab-content-wrapper">
            <article id="tab1-content" class="tab-content">
                <h2>Analytics</h2>
                <p>
                    Investment analytics involves the use of data, statistical techniques, and financial models to
                    evaluate and optimize investment decisions.
                </p>
                <img src="assets/analytics.png" alt="Analytics">
            </article>
            <article id="tab2-content" class="tab-content">
                <h2>Reports</h2>
                <p>
                    Investment reports provide detailed information about the status, performance, and other relevant
                    aspects of an investment or portfolio.
                </p>
                <img src="assets/reports.png" alt="Reports">

            </article>
            <article id="tab3-content" class="tab-content">
                <h2>Performance</h2>
                <p>
                    Investment performance refers to the returns generated on an investment relative to the amount of
                    money invested.
                </p>
                <img src="assets/performance.png" alt="Performance">
            </article>
            <article id="tab4-content" class="tab-content">
                <h2>Funds</h2>
                <p>
                    Investment funds are pooled collections of money from multiple investors that are managed
                    collectively by professionals or on behalf of the investors.
                </p>
                <img src="assets/funds.png" alt="Funds">

            </article>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>